import React from 'react'
import { Outlet, useNavigate } from 'react-router-dom'

export default function Home() {

  // 编程式路由导航
  const navigate = useNavigate()

  const musicBtnHandler = () => {
    // search 参数
    navigate('/main/home/music/杰伦?album=最伟大的作品', {
      state: [
        {id: '001', music: '说好不哭'},
        {id: '002', music: '等你下课'},
        {id: '003', music: '我是如此相信'}
      ]
    })
  }

  const newsBtnHandler = () => {
    navigate('/main/home/news/001?username=张三', {
      state: [
        {id: '001', news: '习近平谈构建网络空间命运共同体  逐梦星辰'},
        {id: '002', news: '国家卫健委：昨日新增本土“69+278”'},
        {id: '003', news: '拜登控枪演讲时遭受害者家属打断'}
      ]
    })
  }

  return (
    <div>
      <h3>我是Home的内容</h3>
      <button onClick={musicBtnHandler}>music</button>
      <button onClick={newsBtnHandler}>news</button>
      <Outlet />
    </div>
  )
}
